import { invertColor } from './color_inverter';

// 替换CSS属性值中的颜色部分，注意这个顺序不能随意改动
const regs = [
  /rgba\(\s*?\d{1,3}\s*?,\s*?\d{1,3}\s*?,\s*?\d{1,3}\s*?,\s*?\d(\.\d+)?\s*?\)/g,
  /rgb\(\s*?\d{1,3}\s*?,\s*?\d{1,3}\s*?,\s*?\d{1,3}\s*?\)/g,
  /#[0-9a-fA-F]{8}/g,
  /#[0-9a-fA-F]{6}/g,
  /#[0-9a-fA-F]{4}/g,
  /#[0-9a-fA-F]{3}/g,
];

export function changeProperty(
  prop: string,
  styleObj: CSSStyleDeclaration,
  selectorText?: string
) {
  const value = styleObj.getPropertyValue(prop);
  // console.log('debug change property', prop, value, styleObj);

  let allReplaced = value;
  regs.forEach((reg) => {
    allReplaced = allReplaced.replace(reg, (color) => invertColor(color));
  });
  // console.log('debug change property to', allReplaced);

  if (allReplaced !== value) {
    // const idx = selectorText?.indexOf('body');
    // if (idx !== undefined && idx >= 0) {
    //   console.log(
    //     'change',
    //     value,
    //     'to',
    //     allReplaced,
    //     'on',
    //     prop,
    //     'of',
    //     selectorText
    //   );
    // }
    styleObj.setProperty(prop, allReplaced);
  }
}
